<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0px;
            font-size: 14px;
            line-height: 23px;
        }
        .pg-header {
            height: 48px;
            background-color: #343a40!important;
            color: white;
            font-size: 14px;
            min-width: 1100px;
            line-height: 48px;
        }
        .pg-header .logo {
            width: 200px;
            font-size: 20px;
            background-color: #2d3b47;
            text-align: center;
        }
        .pg-header .hl-menu .item,.pg-header .hr-menu .item {
            padding: 0 10px;
            height: 48px;
            color: white;
            text-decoration: none;
        }
        .pg-header .hl-menu .item:hover,.pg-header .hr-menu .item:hover {
            background-color: #034c50;
            display: inline-block;
        }
        .pg-header .hl-menu .item-set{
            position: relative;
            display: inline-block;
        }
        .pg-header .hl-menu .item-set:hover .sets {
            display: block;
        }
        .pg-header .hl-menu .item-set .sets{
            position: absolute;
            width: 150px;
            background-color: aliceblue;
            border: 1px solid #dddddd;
            display: none;
        }
        .pg-header .hl-menu .item-set .sets a{
            display: block;
            line-height: 35px;
            text-decoration: none;

        }
        .avatar {
            position: relative;
            display: inline-block;
            float: right;
        }
        .avatar .sets {
            width: 150px;
            position: absolute;
            display: none;
            background-color: aliceblue;
            border: 1px solid #dddddd;
            left: -85px;
            top: 48px;
        }
        .avatar:hover .sets  {
            display: block;
        }
        .avatar .sets a{
            display: block;
            height: 35px;
            text-decoration: none;
        }
        .avatar img {
            height: 40px;
            margin-top: 4px;
        }
        .pg-body .menus {
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #eeeeee;
        }
        .menus .item-title {
            padding: 8px;
            background-color: #dddddd;
            cursor: pointer;
        }
        .pg-body .contents {
            position: absolute;
            top: 48px;
            left: 203px;
            right: 0;
            bottom: 0;
            overflow: scroll;
            border: 1px solid #dddddd;
        }
        .table-test {
            width:25%;
            border-spacing: 2px;
            border-color: grey;
        }
        .table-test,asset {
            width:80%;
        }

        .table-test th{
            background: #f6f6f6;
            line-height: normal;
            padding: 8px 0px;
            text-align: left;
            /* font-weight: 600; */
            font-size: 11px;
        }
        .table-test td{
            font-size: 12px;
            padding: 8px;
            line-height:16px;
            text-align:left;
            vertical-align:top;
            border-bottom:1px solid #eee

        }
        .content a{
            padding: 2px;
            border-left: 2px solid transparent;
        }
        .content a:hover {
            border-left: 2px solid #1c5a9c;
        }
        .add {
            display: inline-block;
            width: 70px;
            margin-top: 30px;
            margin-left: 15px;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .hide {
            display: none;
        }
        .content {
            margin-left: 20px;
        }
        .content a{
            display: block;
            color: #08c;
            text-decoration: none;
        }
        .input-all {
            padding: 5px;
            border: 1px solid #ccc;
            text-indent: 0!important;
            border-radius: 2px;
            min-height: 20px;
        }
        .btn-all {
            margin-top: 15px;
            margin-left: 80px;
            text-align: center;
            width: 50px;
            cursor: pointer;
            line-height: 26px;
            font-size: 14px;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
        }
        .btn-all:hover {
            background-color: #F49900;
        }
        .returnTop {
            position: fixed;
            height: 50px;
            bottom: 50px;
            right: 30px;
            background-color: #3ac57d;
            color: whitesmoke;
            width: 50px;
            cursor: pointer;
            text-align: center;
            display: none;
            box-shadow: 5px 5px 2px #888888;
            border-radius: 2px;
        }
        .returnTop>i{
            font-size: 30px;
            margin: 10px;
        }
        .localmodal {
            position: fixed;
            height: 135px;
            width: 500px;
            top: 50%;
            left: 50%;
            background-color: white;
            margin-top: -260px;
            margin-left: -260px;
            z-index: 10;
        }
        .localshadow {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.1;
            z-index: -1;
        }
        .header {
            font-size: 16px;
            padding: 10px;
        }
        .xicon {
            float: right;
            cursor: pointer;
        }
        .button {
            display: inline-block;
            background-color: #336699;
            width: 70px;
            height: 30px;
            line-height: 30px;
            color: white;
            font-weight: 700;
            text-align: center;
        }
        .button-new {
            background: #ba2121;
            border-radius: 4px;
            padding: 10px 15px;
            border: none;
            color: #fff;
            cursor: pointer;
        }
    </style>
{% block css %}
{% endblock %}
</head>
<body>
<div class="pg-header">
    <a class="logo left" href="/asset-0-0" style="color: white;text-decoration: none">主页</a>
    <div class="hl-menu left">
        <a class="item" href="#"></a>
        <a class="item" href="#"></a>
        <a class="item" href="#"></a>
        <div class="item-set" style="position: relative">
            <a class="item" href="#"></a>
            <div class="sets">
                <a href="#">菜单1</a>
                <a href="#">菜单2</a>
                <a href="#">菜单3</a>
            </div>
        </div>
    </div>
    <div class="hr-menu right">
        <a class="item" href="#"></a>
        <a class="item" href="#"></a>
        <a class="item" href="/logout">登出</a>
        <div class="avatar">
            <a class="item" href="#">
                <img src="/static/image/avatar.png">
            </a>
            <div class="sets">
            <a href="#">菜单1</a>
            <a href="#">菜单2</a>
            <a href="#">菜单3</a>
            </div>
        </div>
    </div>

</div>
<div class="pg-body">
    <div class="menus">
        {% block menus %}
        {% endblock %}
    </div>
    <div class="contents">
        <div>
            <div class="returnTop">
                <i class="fa fa-angle-double-up"></i>
            </div>
            {% block content %}
            {% endblock %}
        </div>
    </div>
    <div class="pg-footer">

    </div>
</div>

<script src="/static/js/jquery-1.11.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script>
    $(function(){
        $('.contents').scroll(function () {
            console.log($(this).scrollTop())
            if ($(this).scrollTop() > 200) {
                $(".returnTop").fadeIn();
            } else {
                $(".returnTop").fadeOut();
            }
        });
        $(".returnTop").click(function () {
             		if ($('.contents').scrollTop() > 0) {
             			$(".contents").animate({ scrollTop: 0 },200);
             		}
             	});
    })


    $('.title').on('click',function (){
        console.log('zzz')
        console.log(this)
        $(this).next().toggle()
    })
    console.log('after')
</script>
{% block js %}
{% endblock %}


</body>
</html>